{%  extends "model/base.html" %}
{% block title %}读者主页{% endblock %}
{% block script %}
    <script>
     $(function () {
        var titles = $(".notice-title");
        for(let item of titles) {
            if (item.innerText.length > 10) {

                let str =  item.innerText.toString();
                item.innerText = str.substr(0,8)+"...";
            }
        }
        $(".selection").click(function () {
            var text = $(this).text()
            $("#selected").text(text)
            $("#searchtype").attr("value",text)
        })
     })
    </script>
{%  endblock %}
{%  block StyleSheet %}
    <style>
        .selection{
            cursor: pointer;
        }
    </style>
{%  endblock %}
{% block content %}
 <div class="row search-box">
                <!-- 主搜索框 -->
            <form class="form-inline  m-auto" action="{% url "searchbooks" %}" method="POST">
                {% csrf_token %}
             <div class="input-group input-group-lg mb-3">
                  <div class="input-group-prepend">
                    <button type="button" id="selected" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                      全部
                    </button>
                    <ul class="dropdown-menu" style="">
                        <li class="dropdown-item"><div class="nav-link selection" >全部</div></li>
                      <li class="dropdown-item"><div class="nav-link selection" >书号</div></li>
                      <li class="dropdown-item"><div class="nav-link selection" >书名</div></li>
                      <li class="dropdown-item"><div class="nav-link selection" >作者</div></li>
                      <li class="dropdown-item"><div class="nav-link selection" >出版社</div></li>
                        <li class="dropdown-item"><div class="nav-link selection" >分类</div></li>

                    </ul>
                  </div>
                  <!-- /btn-group -->
                 <input type="text" id="searchtype" name="type" value="全部" hidden>
                  <input type="text" name="keyword" class="form-control" placeholder="搜索图书">
                 <span class="input-group-append">
                    <button type="submit" class="btn gradient-color-ver" style="color: white">搜索</button>
                  </span>
                </div>

            </form>
        </div>
        <!-- /.row -->
          <div class="row index-content">

              <div class="card col-lg-5 m-auto  card-color">
              <div class="card-header">
                <h3 class="card-title">热门图书</h3>
              </div>
              <!-- /.card-header -->
              <div class="card-body p-0">
                <table class="table table-striped">
                  <thead>
                    <tr>
                      <th style="width: 6px">#</th>
                      <th>书名</th>
                        <th>作者</th>
                      <th >借阅数量</th>
                    </tr>
                  </thead>
                  <tbody>
                  {% for book in books %}
                    <tr>
                      <td>{{ forloop.counter }}.</td>
                      <td> <a href="{% url 'bookdetail' book.BookID %}">{{ book.BName }}</a></td>
                        <td>{{ book.Author}}</td>
                      <td><span class="badge bg-danger" style="width: 70px">{{ book.ReadTimes }}</span></td>
                    </tr>
                    {% endfor %}
                  </tbody>
                </table>
              </div>
              <!-- /.card-body -->

            </div>
               <div class="card col-lg-5 m-auto card-color">
              <div class="card-header">
                <h3 class="card-title">图书馆公告</h3>

                <div class="card-tools">
                  <ul class="pagination pagination-sm float-right">
                      <a class="page-item page-link"  href="{% url 'allnotice' %}">更多<i class="fa fa-angle-double-right"></i></a>

                  </ul>
                </div>
              </div>
              <!-- /.card-header -->
              <div class="card-body p-0">
                <table class="table">
                  <thead>
                    <tr>
                      <th style="width: 10px">#</th>
                      <th style="width: 200px">标题</th>
                      <th style="width: 200px">发布时间</th>
                      <th >阅读量</th>
                    </tr>
                  </thead>
                  <tbody>
                    {% for notice in notices %}
                    <tr>
                      <td>{{forloop.counter}}.</td>
                      <td><a id="notice{{ notice.id }}" class="notice-title" href="{% url 'noticepage' notice.id %}">{{ notice.Title }}</a></td>
                      <td>
                          {{ notice.NTime }}
                      </td>
                      <td><span class="badge bg-success" style="width: 70px">{{ notice.ReadTimes }}</span></td>
                    </tr>
                  {% endfor %}
                  </tbody>
                </table>
              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->

          </div>
{% endblock %}
